
<!-- nepm--aqi网格员 -->
<template>
    <!-- <div>aqi</div> -->
    <div class="aqi-root">
        <el-form label-width="100px" :inline="true" :model="aqiForm" class="roles-form">
            <el-form-item>
                <el-input :prefix-icon="Search" v-model="aqiForm.key" placeholder="查找姓名" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item>
                <span style="color: #545c64;font-weight: 600;">请选择要查询的城市：</span>
                <div class="city-border">
                    <chooseCity style="width: 100%;height: 100%;" @clear="aqiForm.city = ''" @changeCity="queryCity"
                        @changeProvince="queryProvince">
                    </chooseCity>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList()">查找</el-button>
                <el-button type="warning" @click="openAddDialog">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList.data" border>
            <el-table-column prop="userId" label="userId" width="180" align="center" />
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="mobile" label="手机号码" align="center" />
            <el-table-column prop="cityName" label="城市" align="center" />
            <el-table-column prop="username" label="登录邮箱" align="center" />
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template #default="scope">
                    <el-button type="primary" link size="small" @click="openAddDialog(scope.row.userId)">修改</el-button>
                    <el-button type="primary" link size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center;">
            <el-pagination style="margin: 20px 0;" background layout="prev, pager, next,total" :total="tablePage.totalCount"
                @current-change="currentChange" />
        </div>

        <el-dialog v-model="addDialog.dialogVisible" title="新增网格员" width="40%" :before-close="handleClose">
            <el-form label-position="right" label-width="100px" :model="addForm" :rules="rules">
                <el-form-item label="登录邮箱" prop="userName">
                    <el-input v-model="addForm.userName" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="addForm.phone" />
                </el-form-item>
                <el-form-item label="网格员姓名" prop="name">
                    <el-input v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="conPwd">
                    <el-input v-model="addForm.conPwd" type="password" show-password />
                </el-form-item>
                <el-form-item label="城市" prop="cityName">
                    <div class="city-border">
                        <chooseCity style="width: 100%;height: 100%;" @clear="addForm.city = ''" @changeCity="changeCity"
                            @changeProvince="changeProvince"></chooseCity>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="updateOrAdd()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, inject } from 'vue'
import chooseCity from "../../components/common/chooseCity.vue"
import { post, get } from '../../utils/index.ts'
import { Search } from '@element-plus/icons-vue'
const Message = inject('$message') as any
const aqiForm = reactive({
    key: '',
    city: '',
})

const dataList = reactive({
    data: []
})

const getList = async () => {
    let data = {
        page: tablePage.pageIndex,
        limit: 10,
        key: aqiForm.key === '' ? null : aqiForm.key,
        city: aqiForm.city === '' ? null : aqiForm.city,
    }
    let res: any = await get('/sys/user/testList', data)
    if (res && res.code === 0) {
        dataList.data = res.page.list
        tablePage.pageIndex = res.page.currPage
        tablePage.totalCount = res.page.totalCount
        tablePage.totalPage = res.page.totalPage
    } else {
        Message.info(`${res.code}:${res.msg}`)
    }
}
const tablePage = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,//数据条数
    totalPage: 1,//页数
    currentChange: (e: any) => {
        tablePage.pageIndex = e
        getList()
    }
})
const { currentChange } = tablePage

const addDialog = reactive({
    dialogVisible: false,
    handleClose: () => {
        addDialog.dialogVisible = false
        addForm.userName = ''
        addForm.password = ""
        addForm.phone = ""
        addForm.name = ""
        addForm.conPwd = ""
        addForm.city = ""
        addForm.id = 0
    },
    openAddDialog: (id: any) => {
        if (id) {
            // addDialog.initInfo(id)
        }
        addDialog.dialogVisible = true

    },
    initInfo: async (id: any) => {
        await get(`/sys/referdate/info/${id}`, {})
    },
    updateOrAdd: async () => {
        let form = {
            ...addForm,
            cityName: addForm.city + '市',
            username: addForm.userName,
            mobile: addForm.phone
        }
        let url: string = addForm.id != 0 ? '/sys/user/update' : '/sys/user/save1'
        let res: any = await post(url, form)
        if (res && res.code === 0) {
            addDialog.dialogVisible = false
            Message.success('添加成功')
            getList()
        } else {
            Message.info(`${res.code}:${res.msg}`)
        }
    }
})
const { handleClose, openAddDialog, updateOrAdd } = addDialog
interface form {
    name: string,
    userName: string
    password: string
    phone: string
    conPwd: string
    city: string
    id: number
}

const addForm = reactive<form>({
    name: '',
    userName: '',
    phone: '',
    password: '',
    conPwd: '',
    city: '',
    id: 0
})
const validEmail = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入邮箱'))
    } else {
        if (isValidUsername(value)) {
            return callback(new Error('邮箱不应为中文'))
        } if (!validateEmail(value)) {
            return callback(new Error('邮箱格式错误'))
        }
    }
    callback()
}
function isValidUsername(email: string) {
    const pattern = /[\u4e00-\u9fa5]/; // 匹配中文字符
    return pattern.test(email);
}
function validateEmail(email: string) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}
const validatePhone = (rule: any, value: any, callback: any) => {
    const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (!value) {
        return callback(new Error('手机号码不能为空'))
    }
    if (!Number.isInteger(+value.trim())) {
        callback(new Error('请输入数字'))
    } else {
        if (phoneReg.test(value)) {
            callback()
        } else {
            callback(new Error('手机号码格式不正确'))
        }
    }
};

const validPassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        return callback(new Error('请输入密码'))
    } else {
        callback()
    }

}
const validPassword2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        return callback(new Error('请再次输入密码'))
    } else if (value !== addForm.password) {
        callback(new Error('两次输入的密码不相同'))
    } else {
        callback()
    }

}

const rules = ref({
    userName: [{ required: true, validator: validEmail, trigger: 'blur' }],
    phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
    password: [{ required: true, validator: validPassword, trigger: 'blur' }],
    conPwd: [{ required: true, validator: validPassword2, trigger: 'blur' }],
    city: [{ required: true, message: '请选择你的城市', trigger: 'blur' }],
    name: [{ required: true, message: '请输入网格员姓名', trigger: 'blur' }],
})

const changeCity = (e: any) => {
    addForm.city = e.name
}
const changeProvince = (e: any) => {
    addForm.city = e
}
const queryCity = (e: any) => {
    aqiForm.city = e.name
}
const queryProvince = (e: any) => {
    aqiForm.city = e
}
onMounted(() => {
    getList()
})

</script>

<style scoped lang="scss">
.aqi-root {
    box-sizing: border-box;
    padding: 50px 20px;
}

.city-border {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #999;
    border-radius: 5px;
}
</style>